<template>
    <div class="container">
        <div class="tip">
            确认挂号信息
        </div>
        <!-- 卡片 展示就诊人信息-->
        <el-card class="box-card">
            <!-- 卡片的头部 -->
            <!-- 添加就诊人 -->
            <template #header>
                <div class="card-header">
                    <span>选择就诊人</span>
                    <el-button type="success" size="default" :icon="User" @click="goUser">添加就诊人</el-button>
                </div>
            </template>
            <!-- 就诊人卡片内容部分就诊人组件 -->
            <div class="user">
                <Visitor @click="changeIndex(index)" v-for="(user,index) in userArr" :key="user.id" class="item" :user="user" :index="index" :currentIndex="currentIndex"></Visitor>
            </div>
        </el-card>
        <!-- 展示医生信息-->
        <el-card class="box-card">
            <!-- 卡片头部 -->
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>
            <!-- 卡片内容 -->
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期：
                        </div>
                    </template>
                    {{doctorInfo.workDate}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院：
                        </div>
                    </template>
                    {{ doctorInfo.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室：
                        </div>
                    </template>
                    {{ doctorInfo.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名：
                        </div>
                    </template>
                    {{ doctorInfo.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称：
                        </div>
                    </template>
                    {{ doctorInfo.title}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长：
                        </div>
                    </template>
                    {{doctorInfo.skill}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医事服务费：
                        </div>
                    </template>
                    <span style="color: red;">{{doctorInfo.amount}}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!-- 底部确认挂号 -->
        <div class="btn">
            <el-button type="primary" size="large" class="butn" :disabled="currentIndex==-1?true:false" @click="submitOrder">确认挂号</el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
// 引入element-plus 图标
import { User } from '@element-plus/icons-vue'
// 引入就诊人信息的数据接口
import {reqGetVisito,reqDoctorInfo} from '../../../api/hospital/index'
import {reqSubitOrder} from '../../../api/user/index'
import type {SubmitOrder} from '../../../api/user/type'
import type {UserResponseData,UserArr,DoctorInfoData,DocArr} from '../../../api/hospital/type'
import { onMounted,ref } from 'vue';
// 引入路由和路由器对象
import { useRoute,useRouter } from 'vue-router';

import { ElMessage } from 'element-plus';
// 存储全部就诊人信息
let userArr = ref<UserArr>([])
// 存储挂号医生信息
let doctorInfo = ref<any>({})
// 获取路由对象
let $route = useRoute();
let $router = useRouter();
// 存储用户确定就诊人索引值
let currentIndex = ref<number>(-1);
// 组件挂载完毕获取数据
onMounted(()=>{
    fetchUserData();
    fetchDoctorData();
})
// 获取就诊人信息
const fetchUserData=async()=>{
   let result:UserResponseData= await reqGetVisito();
   if (result.code == 200) {
    userArr.value = result.data;
   }
}
// 获取挂号医生信息
const fetchDoctorData=async()=>{
   let result:DoctorInfoData= await reqDoctorInfo($route.query.docId as string);
   if (result.code == 200) {
    doctorInfo.value = result.data;
    // console.log(result.data);
    
   }
}
// 点击就诊人子组件的回调
const changeIndex =(index:number)=>{
    // 存储当前用户选中就诊人信息的索引值
    currentIndex.value = index
}
// 确定挂号按钮的回调
    const submitOrder = async() =>{
        // 医院编号
        let hoscode = doctorInfo.value.hoscode;
        // 医生ID
        let scheduleId = doctorInfo.value.id;

        // 就诊人的id
        let patientId = userArr.value[currentIndex.value].id;
        // 提交订单
       let result:SubmitOrder = await reqSubitOrder(hoscode,scheduleId,patientId)
        // 提交订单成功
        if(result.code==200){
            $router.push({path:'/user/order',query:{orderId:result.data}})
        }  else{
            ElMessage({
                type:"error",
                message:result.message,
            })
        } 
    }
    // 预约挂号添加就诊人的按钮
    const goUser = () =>{
        // 路由跳转
        $router.push({path:'/user/patient',query:{type:'add'}})
    }
 </script>

<style scoped lang="scss">
.container {
    .tip {
        font-size: 25px;
        color: #d78604;
        font-weight: 700;
        margin: 30px 20px;
    }

    .box-card {
        margin: 30px 0;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                font-weight: 800;
                // color: #d78604;
            }
        }

        .user {
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 30%;
                margin: 10px 10px;
            }
        }
    }
    .btn{
        display: flex;
        justify-content: center;
        margin: 10px 0;
        width: 100%; 
        .butn{
            width: 20%; 
        }
    }
}
</style>